<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_small'"
    :title="title"
    :visible.sync="isShowUpdateDialog"
    :append-to-body="true"
    :before-close="handleCloseDialog"
    @closed="closedDialog"
  >
    <p slot="title">{{ title }}</p>
    <div class="main-container">
      <el-form
        ref="baseForm"
        class="base-pipeline-layout system-customer-form"
        :model="dataForm"
        :rules="rules"
        status-icon
        label-width="130px"
      >
        <el-form-item :label="sysBusinessUnit.unit" prop="unitName">
          <el-input
            v-model="dataForm.unitName"
            :placeholder="sysBusinessUnit.unit"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="base-dialog-footer">
      <el-button v-loading="submitLoad" type="primary" @click="submitForm">{{
        operateType.save
      }}</el-button>
      <el-button @click="handleCloseDialog">{{ operateType.cancel }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { update, get } from "../../../api/SysBusiness/SysBusinessUnit.js";
export default {
  name: "SysBusinessUnitEditDialog",
  components: {},
  props: {
    isShowUpdateDialog: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      rules: {
        unitName: [
          {
            required: true,
            message: this.$t("SysBusinessUnit.unit"),
            trigger: "blur",
          },
        ],
      },
      submitLoad: false,
      dataForm: {
        id: 0,
        unitName: "",
        unitNum: "''",
      },
      readOnly: false,
      title: this.$t("SysBusinessUnit.editingMethodStandards"),
      customerId: "",

      total: 0,
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessUnit() {
      return this.$t("SysBusinessUnit") || {};
    },
  },
  watch: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      this.dataForm.id = this.editId;
      get(this.dataForm)
        .then((res) => {
          this.dataForm.unitName = res.data.unitName;
        })
        .catch(() => {});
      this.title = this.$t("SysBusinessUnit.editUnit");
    },
    // 保存
    submitForm() {
      this.submitLoad = true;
      this.editAPI(this.dataForm);
    },

    editAPI(data) {
      update(data)
        .then((res) => {
          this.submitLoad = false;
          this.handleClose();
        })
        .catch(() => {
          this.submitLoad = false;
        });
    },
    // 操作成功回调用
    successfulOperation() {
      this.$emit("success");
      this.$emit("getList");
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.baseForm.resetFields();
      this.$emit("update:isShowUpdateDialog", false);
      this.$emit("getList");
    },
    // 关闭客户弹框没保存
    handleCloseDialog() {
      // 动画结束后在清空表单 防止页面闪烁
      this.$refs.baseForm.resetFields();
      this.$emit("update:isShowUpdateDialog", false);
    },
    // 关闭弹框动画结束
    closedDialog() {
      // 动画结束后在清空表单 防止页面闪烁
    },
  },
};
</script>

<style  scoped>
.avatar-pane {
  height: 500px;
}

/deep/ .el-collapse-item__header {
  height: 38px;
  line-height: 20px;
  padding: 4px;
  background-color: #f1f8ff;
}

/deep/ .el-collapse-item__content {
  padding-top: 25px;
  padding-bottom: 12.5px;
}
</style>
